<template>
	<view class="pagesContent">
		<view class="pagesContentView">
			<view class="top">
				<view class="title"> 文件类型 </view>
				<uni-row class="Classification">
					<uni-col class="spanItem" :span="12" v-for="(item,index) in classList" :key="index">
						<view class="itemView" @click="selectItem(item , index)">
							<view class="item">
								<image class="icon" :class="{activeIcon : optionIndex == index}" :src="item.icon"
									mode="">
								</image>
								<view class="text">{{ item.title }} </view>
							</view>
						</view>
					</uni-col>
				</uni-row>
				<view class="title"> 历史恢复 </view>
			</view>
			<view class="foo">
				<view class="fooView"
					v-if="list_PICTURE.length != 0 ||  list_VIDEO.length != 0 || list_AUDIO.length != 0 || list_FILE.length != 0 ">
					<view class="itemView">
						<view class="title">
							<image class="icon" src="../../static/images/hisPictoreIcon.png" mode=""></image>
							<view class="text">图片 </view>
							<image class="right" src="../../static/images/right_1.png" mode=""
								@click="goListHIs('PICTURE')"></image>
						</view>
						<view class="list">
							<uni-row v-if="list_PICTURE.length!=0">
								<uni-col :span="4" class="item" v-for="(item,index) in list_PICTURE" :key="index">
									<view class="imagesView"  @click="showItem(item)">
										<image class="icon" style="background-color: #EEF3FF;" :src="item.content.filePath" mode="aspectFit">
										</image>
										<view class="fileName">{{ item.content.fileType |toUpCase }} </view>
									</view>
								</uni-col>
							</uni-row>
							<view class="noData_item" v-if="list_PICTURE.length==0">暂无导出数据 </view>
						</view>
					</view>
					<view class="clear"> </view>
					<view class="itemView">
						<view class="title">
							<image class="icon" src="../../static/images/hisMp4Icon.png" mode=""></image>
							<view class="text">视频 </view>
							<image class="right" src="../../static/images/right_1.png" mode=""
								@click="goListHIs('VIDEO')"></image>
						</view>
						<view class="list">
							<uni-row v-if="list_VIDEO.length !=0">
								<uni-col :span="4" class="item" v-for="(item,index) in list_VIDEO" :key="index">
									<view class="imagesView" @click="showItem(item)">
										<image class="icon" src="../../static/images/shipin.png" mode="aspectFit">
										</image>
										<view class="fileName">{{ item.content.fileType |toUpCase }} </view>
									</view>
								</uni-col>
							</uni-row>
							<view class="noData_item" v-if="list_VIDEO.length==0">暂无导出数据 </view>
						</view>
					</view>
					<view class="clear"> </view>
					<view class="itemView">
						<view class="title">
							<image class="icon" src="../../static/images/hisMp3Icon.png" mode=""></image>
							<view class="text">音频 </view>
							<image class="right" src="../../static/images/right_1.png" mode=""
								@click="goListHIs('AUDIO')"></image>
						</view>
						<view class="list">
							<uni-row v-if="list_AUDIO.length!=0">
								<uni-col :span="4" class="item" v-for="(item,index) in list_AUDIO" :key="index">
									<view class="imagesView"  @click="showItem(item)">
										<image class="icon" src="../../static/images/musicIcon.png" mode="aspectFit">
										</image>
										<view class="fileName">{{ item.content.fileType | toUpCase}} </view>
									</view>
								</uni-col>
							</uni-row>
							<view class="noData_item" v-if="list_AUDIO.length==0">暂无导出数据 </view>
						</view>
					</view>
					<view class="clear"> </view>
					<view class="itemView">
						<view class="title">
							<image class="icon" src="../../static/images/hisFileIcon.png" mode=""></image>
							<view class="text">文件 </view>
							<image class="right" src="../../static/images/right_1.png" mode=""
								@click="goListHIs('FILE')"></image>
						</view>
						<view class="list">
							<uni-row v-if="list_FILE.length!=0">
								<uni-col :span="4" class="item" v-for="(item,index) in list_FILE" :key="index">
									<view class="imagesView" @click="showItem(item)">
										<image class="icon" src="../../static/images/hyisFileIcon.png" mode="aspectFit">
										</image>
										<view class="fileName">{{ item.content.fileType |toUpCase }} </view>
									</view>
								</uni-col>
							</uni-row>
							<view class="noData_item" v-if="list_FILE.length==0">暂无导出数据 </view>
						</view>
					</view>
				</view>
				<view class="clear"></view>
				<view class="no_data"
					v-if="list_PICTURE.length == 0 && list_VIDEO.length == 0 && list_AUDIO.length == 0 && list_FILE.length == 0 ">
					<image class="icon" src="../../static/images/noDataIcon.png" mode=""></image>
					<view class="hint">暂无历史记录 </view>
				</view>
				<view class="clear" style="height: 40rpx;"> </view>
				<adView></adView>
				<view class="clear" style="height: 20rpx;"> </view>
			</view>


		</view>
	</view>

	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	import {
		getNowFormatDate_ymd,
		sortDateArray
	} from "../../util/util.js"
	export default {
		data() {
			return {
				optionIndex: -1,
				classList: [{
						type: "PICTURE",
						icon: "../../static/images/PICTURE.png",
						title: "图片"
					},
					{
						type: "VIDEO",
						icon: "../../static/images/VIDEO.png",
						title: "视频"
					},
					{
						type: "AUDIO",
						icon: "../../static/images/AUDIO.png",
						title: "音频"
					},
					{
						type: "FILE",
						icon: "../../static/images/FILE.png",
						title: "文档"
					}
				],
				filesType: "PICTURE",
				selectOptions: false,
				pages: 1,
				limit: 20,
				hisList: [],
				list: [],

				list_PICTURE: [],
				list_VIDEO: [],
				list_AUDIO: [],
				list_FILE: []


			}
		},
		onShow() {
			let this_ = this;
			if (!this.hasLogin) {
				this.goReLaunch("/pages/user/login")
			} else {
				this.$nextTick(() => {
					this.hisList = []
					this.list = []
					this.pages = 1
					this.optionIndex = 0
					this.getData(null)
				})
			}
		},
		computed: {
			...mapGetters(["hasLogin", "appVipSwitch", "userInfo"])
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.pages = 1
			this.hisList = []
			this.list = []
			this.getData(null)
		},
		methods: {
			selectItem(item, index) {
				if (this.appVipSwitch) { //需要会员
					if (this.userInfo.vip_info.is_vip) { //是会员						
						uni.setStorageSync("scanType", item.type)
						this.goPage("/pages/his/list", null)
					} else { //不是会员
						this.goPage("/pages/user/member")
					}
				} else {
					uni.setStorageSync("scanType", item.type)
					this.goPage("/pages/his/list", null)
				}

			},
			goListHIs(type) {
				if (this.appVipSwitch) { //需要会员
					if (this.userInfo.vip_info.is_vip) { //是会员						
						uni.setStorageSync("scanType", type)
						this.goPage("/pages/his/list", null)
					} else { //不是会员
						this.goPage("/pages/user/member")
					}
				} else {
					uni.setStorageSync("scanType", type)
					this.goPage("/pages/his/list", null)
				}

			},
			getData(type) {
				uni.showLoading({
					title: '加载中...'
				});
				let params = {
					type: type,
					page: this.pages,
					limit: this.limit
				}
				console.log(params)
				this.$http.post("/api/store/homeByShuju", params).then(res => {
					console.log(res)
					uni.hideLoading()
					uni.stopPullDownRefresh();
					if (res.code == 0) {
						this.hisList = res.data.result
						this.list_PICTURE = !!this.hisList.PICTURE ? this.hisList.PICTURE : []
						this.list_VIDEO = !!this.hisList.VIDEO ? this.hisList.VIDEO : []
						this.list_AUDIO = !!this.hisList.AUDIO ? this.hisList.AUDIO : []
						this.list_FILE = !!this.hisList.FILE ? this.hisList.FILE : []
						this.$forceUpdate()
					} else {
						this.text(res.data.message)
					}
				})
			},
			getDataType(type) {
				uni.showLoading({
					title: '加载中...'
				});
				let params = {
					type: type,
					page: this.pages,
					limit: this.limit
				}
				console.log(params)
				this.$http.post("/api/store/homeByShuju", params).then(res => {
					console.log(res)
					uni.hideLoading()
					uni.stopPullDownRefresh();
					if (res.code == 0) {
						if (res.data.list.length != 0) {
							this.hisList = [...this.hisList, ...res.data.list]
							this.hisList.forEach((v, i) => {
								v.date = getNowFormatDate_ymd(v.created_at)
							})
							this.list = sortDateArray(this.hisList)
						} else {
							this.text("没有更多了")
						}
					} else {
						this.text(res.data.message)
					}
				})
			},
			showItem(m) {
				uni.setStorageSync("previewFrom", "hisList")
				uni.setStorageSync("selectItem_id", m.id)
				uni.setStorageSync("selectItem", JSON.stringify(m.content))
				uni.setStorageSync("scanType", m.type)

				if (this.appVipSwitch) { //需要会员
					if (this.userInfo.vip_info.is_vip) { //是会员
						this.goPage("/pages/preview/index")
					} else { //不是会员
						this.goPage("/pages/user/member")
					}
				} else {
					this.goPage("/pages/preview/index")
				}
			},

		}
	}
</script>
<style>
	page {
		background: #ffffff;
	}
</style>

<style lang="scss" scoped>
	.pagesContent {
		position: fixed;
		top: 40rpx;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 48rpx 48rpx 0 0;
		background: #FFFFFF;
		box-shadow: 0px 0px 32rpx 0px rgba(51, 114, 251, 0.27);
		border-radius: 48rpx 48rpx 0px 0px;
		overflow: hidden;

		.pagesContentView {
			position: relative;
			border-radius: 48rpx 48rpx 0 0;
			width: 100%;
			height: 100%;

			.top {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				height: 446rpx;
				background-color: #ffffff;
				z-index: 20;

				.title {
					padding: 0 32rpx;
					height: 98rpx;
					line-height: 98rpx;
					color: #050505;
					font-weight: 600;
					font-size: 28rpx;
				}

				.Classification {
					.itemView {
						margin-bottom: 20rpx;

						.item {
							width: 330rpx;
							height: 120rpx;
							background: #EEF3FF;
							border-radius: 20rpx;
							margin: 0 auto;

							.icon {
								width: 96rpx;
								height: 96rpx;
								display: block;
								float: left;
								margin: 17rpx 51rpx 0 59rpx;

							}

							.activeIcon {
								opacity: 1;
							}

							.text {
								text-align: left;
								height: 120rpx;
								font-size: 32rpx;
								font-weight: 500;
								color: #050505;
								line-height: 120rpx;
							}
						}
					}
				}

			}

			.foo {
				position: absolute;
				top: 446rpx;
				left: 0;
				right: 0;
				bottom: 0;
				overflow-y: auto;
				padding-top: 40rpx;

				.itemView {
					height: 180rpx;
					margin-bottom: 60rpx;

					.title {
						padding: 0 32rpx;
						height: 26rpx;
						margin-bottom: 28rpx;

						.icon {
							float: left;
							width: 28rpx;
							height: 24rpx;
							margin: 1rpx 18rpx;
						}

						.text {
							float: left;
							height: 28rpx;
							line-height: 28rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #454655;
						}

						.right {
							float: right;
							width: 26rpx;
							height: 26rpx;
						}
					}

					.list {
						padding: 0 3rpx;

						.item {
							.imagesView {
								width: 90rpx;
								height: 130rpx;
								margin: 0 auto;

								.icon {
									width: 90rpx;
									height: 90rpx;
									border-radius: 10rpx;
									overflow: hidden;
									margin-bottom: 20rpx;
								}

								.fileName {
									height: 20rpx;
									font-size: 20rpx;
									font-weight: 400;
									color: #454655;
									line-height: 20rpx;
									text-align: center;
								}
							}
						}

						.noData_item {
							text-align: center;
							height: 90rpx;
							font-size: 24rpx;
							line-height: 40rpx;
							color: #454655;
						}
					}
				}



				.no_data {
					padding-top: 153rpx;

					.icon {
						width: 314rpx;
						height: 264rpx;
						display: block;
						margin: 0 auto 25rpx;
					}

					.hint {
						text-align: center;
						height: 44rpx;
						font-size: 28rpx;
						font-family: AlibabaPuHuiTi_20;
						font-weight: normal;
						color: #939599;
						line-height: 44rpx;
						margin-bottom: 50rpx;
					}
				}


			}
		}


	}
</style>